<template>
  <div id="v-header">
    <header>
        <div class="left">
            <router-link to="/articleList">
                <img src="../assets/logo_white.png">
                <span>新闻项目</span>
            </router-link>
        </div>
        <div class="right" v-if="!isLogin">
            <div class="notLogin"><router-link to="/login">登录</router-link></div>
            <div class="notLogin"><router-link to="/register">注册</router-link></div>
        </div>
        <div class="right" v-if="isLogin">
            <img src="../assets/bg_my.png" class="userAvatar" v-show="!showAvatar">
            <img :src="userAvatar" class="userAvatar" v-show="showAvatar">
            <span class="username" v-bind:title="userName">{{userName}}</span>
            <div class="toggle">
                <i class="arrow"></i>
                <ul>
                    <li><router-link to="/my_account"><img src="../assets/icon_my.png">我的账户</router-link></li>
                    <li><router-link to="/userSetting"><img src="../assets/icon_sign.png">个人设置</router-link></li>
                    <li><router-link to="/changePwd"><img src="../assets/icon_comment_color.png">修改密码</router-link></li>
                    <li v-on:click="clear_token"><img src="../assets/icon_out.png"><router-link to="/login">退出登录</router-link></li>
                </ul>
            </div>
        </div>
    </header>
  </div>
</template>

<script>
export default {
  name: 'v-header',
  data(){
      return{
          isLogin:false,
          showAvatar:false,
          userAvatar:'',
          userName:localStorage.newsUsername
      }
  },
  created:function(){
      this.judge();
  },
  methods:{
        clear_token:function(){
            localStorage.clear();
        },
        judge: function() {
            if (localStorage.newstoken != undefined) {
                this.userName=localStorage.newsUsername;
                this.isLogin=true;
                this.userAvatar = localStorage.newAvatar;

                var str = localStorage.newAvatar;
                var index = str .lastIndexOf("\/");  
                str  = str .substring(index + 1, str .length);
                if(str != "undefined"){
                    this.showAvatar = true
                }else{
                    this.showAvatar = false
                }
            } else {
                this.isLogin=false
            }
        },
  }
}
</script>

<style scoped>
     header{
        width:100%;
        height:79px;
        line-height: 79px;
        background: #0074FF;
    }
    header::after{
        content: "";
        clear: both;
        display: block;
    }
    .left{
        float: left;
        height:79px;
        margin-left: 130px;
    }
    .left img{
        vertical-align: text-bottom;
        display: inline-block;
        margin-right: 32px;
    }
    .left span{
        font-size: 26px;
        color: #fff;
    }
    .right{
        float: right;
        margin-right: 130px;
        font-size: 20px;
        color: #fff;
    }
    .right .notLogin{
        display: inline-block;
        margin-left: 28px;
    }
    .userAvatar{
        width:40px;
        height:40px;
        border-radius: 50%;
        vertical-align: middle;
    }
    .username{
        font-size: 18px;
    }
    .arrow{
        display: inline-block;
        width:32px;
        height:17px;
        background: url(../assets/icon_arrow_up.png) no-repeat 7px 4px;
        transition: all 0.5s;
    }
    .toggle{
        position: relative;
        display: inline;
    }
    .toggle:hover .arrow{
        transform:rotateZ(180deg)
    }
    .toggle ul{
        position: absolute;
        top:37px;
        left:-50px;
        width:140px;
        background: #FFFFFF;
        box-shadow: -2px -2px 3px 1px rgba(39,52,101,0.08), 2px 2px 3px 1px rgba(39,52,101,0.08);
        font-size: 14px;
        color:#333;
        text-align: center;
        visibility: hidden;
        transition: all 0.5s;
        opacity: 0;
    }
    .toggle:hover ul{
        visibility: visible;
        opacity: 1;
    }
    .toggle ul li{
        height:50px;
        line-height: 50px;
        cursor: pointer;
    }
    .toggle ul li img{
        vertical-align: middle;
        margin-right: 10px;
        width:20px;
        height:20px;
    }
</style>
